<template>
  <div class="merchant-container">
    <h1>商家端</h1>
    <a-card class="merchant-card">
      <template #title>商家概览</template>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-statistic title="今日销售额" :value="12345" prefix="¥" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="今日订单数" :value="42" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="商品数量" :value="156" />
        </a-col>
      </a-row>
    </a-card>
    
    <a-divider />
    
    <a-card class="merchant-card">
      <template #title>商家功能</template>
      <a-space direction="vertical" size="large" style="width: 100%">
        <a-row :gutter="16">
          <a-col :span="6" v-for="(item, index) in merchantFeatures" :key="index">
            <a-card hoverable>
              <template #cover>
                <div class="feature-icon">
                  <component :is="item.icon" />
                </div>
              </template>
              <a-card-meta :title="item.title">
                <template #description>{{ item.description }}</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </a-space>
    </a-card>
  </div>
</template>

<script setup>
import { IconApps, IconGift, IconUser, IconSettings } from '@arco-design/web-vue/es/icon';

const merchantFeatures = [
  { title: '订单管理', description: '管理和处理订单', icon: IconApps },
  { title: '商品管理', description: '管理商品信息', icon: IconGift },
  { title: '客户管理', description: '管理客户信息', icon: IconUser },
  { title: '店铺设置', description: '配置店铺参数', icon: IconSettings }
];
</script>

<style scoped>
.merchant-container {
  padding: 20px;
}

.merchant-card {
  margin-bottom: 20px;
}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #f2f3f5;
  font-size: 36px;
  color: #165DFF;
}
</style>
